<template>
  <div style="background:#f1f1f1;min-height:75vh">
    <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam"></navTop>
    <section class="section_status changeBgToRed">
      <div class="section_top">
        <p>待付款</p>
        <p>请支付</p>
      </div>
    </section>
    <section class="section_con" style="background:#f1f1f1;font-size:0.9rem">
      <div class="section_con2">
        <p>医生：{{doctorname}}</p>
        <!--
          <p>药房：{{yaofangname}}</p>
          <p>药房电话：{{yaofangphone}}</p>
          <p>药房地址：{{yaofangadr}}</p>
        -->
      </div>
      <div class="section_con3" v-if="addrnum>0">
        <!--
          <div class="select">地址选择：
          <select v-model="selectedADDRALIAS" @change="changedz(selectedADDRALIAS)">
            <option v-for="item in addrList" :value="item.UAID" :key="item.id">{{item.ADDR}}</option>
          </select>
          </div>
        -->
        <div class="select2" style="position:relative;padding:0" @click="goAddr">
          <p>收货人：{{selectedADDRALIAS_NAME}}</p>
          <p style="word-wrap:break-word">收货地址：{{selectedADDRALIAS_ADDR}}</p>
          <p>联系电话：{{selectedADDRALIAS_MOBILE}}</p>
          <span style="position: absolute;top: 20%;right: 1%;"><i class="iconfont icon-gengduo" style="font-size:2rem"></i></span>
        </div>
      </div>
      <div class="section_con3" v-else>
        <div class="select" style="text-align:center">
          <nuxt-link :to="{name:'wode-addAddress'}">新增收货地址</nuxt-link>
        </div>
      </div>
      <div class="section_con4">
        <p>患者留言：<input type="text" placeholder="(最多输入60字)" maxlength="60" v-model="wonote"></p>
      </div>
      <!--
        <div class="section_con5" v-if="this.$route.query.oprlb
        =='1'"
      >
        <table>
          <thead>
            <tr>
              <th style="width:90%;font-size:0.9rem">品名（规格）</th>
              <th style="width:25%;font-size:0.9rem;text-align:right">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in durgList" :key="item.id">
              <td>{{item.split('#')[1]}}</td>
              <td>{{item.split('#')[2]}}={{item.split('#')[3]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="section_con5" v-else>
        <table>
          <thead>
            <tr>
              <th style="width:77%;font-size:0.9rem">品名（规格）</th>
              <th style="width:13%;font-size:0.9rem">数量</th>
              <th style="width:15%;font-size:0.9rem">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in durgList" :key="item.id">
              <td>{{item.split('#')[1]}}</td>
              <td>{{item.split('#')[2]}}</td>
              <td>{{item.split('#')[2]}}={{item.split('#')[3]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      -->
      <!-- <div class="section_con6">
        <p>医嘱：{{$route.query.acsm}}</p>
        <p class="chooseServer">附加服务：
          <input type="checkbox" id="psf" value="配送费" v-model="psf"
            @click="changepsfmoney"
          >
          <label for="psf">配送费</label>
          <input type="checkbox" id="jgf" value="加工费" v-model="jgf"
            @click="changejgfmoney"
          >
          <label for="jgf">加工费</label>
        </p>
      </div>
      <div class="section_con7">
        <p>
          <span v-if="jgf==true">加工费：{{medicjgf}}元</span>
          <span style="float:right">药品：{{selectAYID_JE_SF}}元</span>
        </p>
        <p v-if="psf==true">配送费：{{medicpsf}}元</p>
      </div> -->
    </section>
    <section class="section_bot">
      <p>
        <span>医生：{{doctorname}}</span>
        <span>金额：{{jeyf}}元</span>
      </p>
      <nuxt-link class="pay" v-if="selectedADDRALIAS" :to="{path:'/chufang/pay',query:{jeyf:this.jeyf,orderId:this.orderId, ifJgf: this.jgf, ifPsf: this.psf , jgf: this.medicjgf, psf: this.medicpsf, yff: this.selectAYID_JE_SF, selectedAYID:$route.query.ayid, selectedADDRALIAS:this.selectedADDRALIAS}}" tag="div">付款</nuxt-link>
      <div class="pay1" v-else>未填写地址</div>
    </section>
  </div>
</template>
<script scoped>
// mport navTop from '~/components/common/navTop';
// const { config } = window;

export default {
  data() {
    return {
      // 页面数据
      doctorname: '',
      jeyf: '', // 实付款/金额
      orderId: '',

      // 原有数据
      showBack: true,
      bkParam: 'bk',
      jgf: '', // 是否加工标记
      psf: '', // 是否配送标记
      wonote: '', // 患者留言
      medicfs: '',
      medicjgf: 0, // 代加工金额
      medicpsf: 0, // 配送金额
      headTitle: '药方订单详情',

      prescribeInfo: '',
      durgList: [],
      prescribe: {},
      ts: this.newStore(),
      tq: this.getData(),
      DATA: { oid: `${this.$route.query.pm}` },
      price: '0',
      selectAYID_DURGDETAILS: '', // 药方药品详情

      selectAYID_JE_SF: '', // 药方药品金额
      selectedAYID: '',

      addrList: [], // 收货地址列表
      selectedADDRALIAS: '', // 地址ID
      selectedADDRALIAS_NAME: '',
      selectedADDRALIAS_ADDR: '',
      selectedADDRALIAS_MOBILE: '',
      pricelist: [],
      selectAYID_JE_ZSF: 0, // 支付总金额

      // 测试数据
      param: '', // 订单ID
    };
  },
  created() {
    // 初始参数，讨论
    // 付款前是直接支付，还是要关注，还是需要注册
    // 先调出支付

    this.getAddr();
    this.param = `${this.$route.query.pm}`;
    this.getPrescribeOrder();
  },
  destroyed() {
  },
  computed: {
  },
  methods: {
    goAddr() {
      this.$router.push('/wode/addressList');
    },
    changejgfmoney() {
      this.jgf = !this.jgf;
      if (this.jgf) {
        this.medicjgf = 16 * this.medicfs;
      } else {
        this.medicjgf = 0;
      }
    },
    changepsfmoney() {
      this.psf = !this.psf;
      if (this.psf) {
        this.medicpsf = 8;
      } else {
        this.medicpsf = 0;
      }
    },
    changedz(id) {
      for (let i = 0; i < this.addrList.length; i += 1) {
        if (this.addrList[i].UAID == id) {
          this.selectedADDRALIAS_NAME = this.addrList[i].LXRXM;
          this.selectedADDRALIAS_ADDR = this.addrList[i].PRIVINCEMC + this.addrList[i].STREETMC + this.addrList[i].ADDR;
          this.selectedADDRALIAS_MOBILE = this.addrList[i].LXRSJ;
        }
      }
    },
    // 返回该患者收药地址列表
    getAddr() {
      this.tq.getAddr(this.DATA).then((ts) => {
        this.addrList = ts.d.DATAOBJ.DATA;
        this.addrnum = this.addrList.length;
        for (let i = 0; i < this.addrList.length; i += 1) {
          if (this.addrList[i].DEFAULTBZ == 'y') {
            this.changedz(this.addrList[i].UAID);
            this.selectedADDRALIAS = this.addrList[i].UAID;
          } else {
            this.changedz(this.addrList[0].UAID);
            this.selectedADDRALIAS = this.addrList[0].UAID;
          }
        }
      });
    },
    getPrescribeOrder() {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.07.05',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: {
            ordstatus: '',
            keywords: this.param,
            rowsperpage: '10',
            page: '1',
            ordercolumn: 'openDate',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        const list = ts.d.DATAOBJ.DATA;
        this.doctorname = list[0].DOCTORNAME;
        this.jeyf = list[0].JE_YF;
        this.orderId = list[0].ORDID;
        this.medicfs = list[0].FS;
        this.medicjgf = list[0].JGF;
        this.medicpsf = list[0].PSF;
        this.selectAYID_JE_SF = list[0].JE_YF;
        this.selectedAYID = list[0].AYID;
      });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.chooseServer input{
  margin-left: 2rem;
}
.select2 p{
  font-size: 0.9rem;
  line-height: 1rem;
  padding-top: 0.5rem;
}
.section_status {
  margin-top: 2.5rem;
  height: 4rem;
}
.select select {
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #ddd;
  padding: 0.4rem;
  width: 70%;
  overflow: auto;
  margin: 0;
}
.select option {
  background: #fff;
  border: none;
}
.section_top p {
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  font-family: "微软雅黑";
  margin: 0;
  padding-top: 0.8rem;
}
.section_top p:last-child {
  font-size: 1rem;
  font-family: "微软雅黑";
  padding: 0;
}
.section_con1 {
  background: #e7e1a8;
  width: 100%;
}
.section_con p {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-family: "微软雅黑";
}
.section_con div {
  margin-top: 0.5rem;
  background: #fff;
  padding: 0.5rem;
}
.section_con div:first-child {
  margin-top: 0;
}
.section_con1 span:last-child {
  float: right;
  padding-right: 1rem;
}
.section_con2 span {
  float: right;
  padding-right: 1rem;
  font-size: 0.8rem;
}
.section_con4 input {
  border: none;
  outline: none;
  width: 75%;
  padding: 0.3rem 0;
}
.section_con5 ul {
  margin: 0;
  padding-left: 1rem;
  width: 100%;
  height: 5rem;
}
.section_con5 ul li {
  list-style: none;
  font-size: 0.9rem;
  margin-bottom: 0;
  color: #333;
  font-family: "微软雅黑";
  float: left;
  margin: 0.2rem 0.5rem;
}
.section_bot {
  background: #fff;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  position: fixed;
  bottom: 0;
  width: 100%
}
.section_bot p {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-family: "微软雅黑";
  padding: 0.5rem 1rem;
}
.section_bot span:nth-child(2) {
  float: right;
  color: #f60;
}
.section_bot .pay {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #3190e8;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
}
.section_bot .pay1 {
  width: 100%;
  padding: 8px;
  background-color:#ccc;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.2rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  font-weight: 700;
}
.section_con7{
  min-height: 3rem;
  max-height: 5rem;
}
.changeBgToGreen {
  background-color: rgb(196, 123, 40);
}
.changeBgToBlue {
  background-color: rgb(224, 168, 62);
}
.changeBgToRed {
  background-color: rgb(236, 79, 79);
}
</style>

